<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar :title="vuex_table_title || '榕商之家'" :border-bottom="false"></fa-navbar>

		<!-- 搜索 -->
		<view class="u-p-20 searchBar  u-flex u-col-center">
			<view class="u-flex-1">
				<fa-search :mode="2" :isShowPng="true"></fa-search>
			</view>
			<view class="u-p-l-15 u-p-r-5 u-flex u-col-center" v-if="is_order">
				<fa-orderby-select :filterList="filterList" :orderList="orderList" :multiple="true" @change="goOrderBy">
				</fa-orderby-select>
			</view>
		</view>

		<!-- 分类 -->
		<!-- <view class="u-border-top" v-if="isTab">
			#ifdef MP-BAIDU
			<fa-u-tabs :list="tabList" :active-color="theme.bgColor" :bar-width="tabwidth" name="title" :is-scroll="true" :current="current" @change="change"></fa-u-tabs>
			#endif
			#ifndef MP-BAIDU
			<u-tabs :list="tabList" :active-color="theme.bgColor" :bar-width="tabwidth" name="title" :is-scroll="true" :current="current" @change="change"></u-tabs>
			#endif
		</view>	 -->
		<!-- 轮播图 -->
		<view class="swiper_box">
			<view class="swiper_bgbox"></view>
			<view class="swiper_center">
				<u-swiper :title="false" border-radius="15" height="320" :list="bannerList" keyName="image"
					@click="openPage"></u-swiper>
			</view>
		</view>


		<!-- 新闻热点 -->
		<view class="news">
			<view class="news_news">
				系统公告
			</view>
			<view class="news_newsTitle">
				<view class="news_title">
					<view class="news_tim">
						<swiper class="swiper" :autoplay="true" :interval="5000" :vertical="true" :circular="true"
							style="height: 80rpx;flex: 6;margin-left: 5px;" :duration="1000">
							<swiper-item v-for="(item,i) in noticelist" :key="i">
								<view @click="toNoticeDetail(item)">
									<view class="u-line-1 u-m-b-10 fontBlack">
										{{item.title}}
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</view>

		<!-- 页面导航 -->
		<view class="indexBar">
			<view class="indexBar_index" v-for="(item,key) in navList" :key='key' @click="indexBar(item)">
				<view class="">
					<u-image width="104rpx" border-radius="6" height="104rpx" :src="item.image"></u-image>
				</view>
				<view class="BarTitle">{{item.title}}</view>
			</view>
		</view>
		<!-- 列表 -->
		<fa-article-item :archives-list="archivesList"></fa-article-item>
		<view class="" style="background-color: #fff;height: 40px;" v-if="!is_empty" @click="goMore">
			<view class="" style="font-weight: bold;float: right;margin: 10px 16px 0 0; color: #B9B9B9;">
				更多新闻 >>
			</view>
		</view>
		<!-- 为空 -->
		<view class="u-m-t-60 u-p-t-60" v-if="is_empty">
			<u-empty text="暂无内容展示" mode="list"></u-empty>
		</view>
		<!-- 回到顶部 -->
		<!-- <u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }" :custom-style="{ backgroundColor: lightColor }"></u-back-top> -->
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>

</template>

<script>
	export default {
		computed: {
			bannerList() {
				if (this.vuex_config.bannerList) {
					return this.vuex_config.bannerList;
				}
				return [];
			},
			navList() {
				console.log(this.vuex_config.navList,
					'this.vuex_config.navListthis.vuex_config.navListthis.vuex_config.navList')
				if (this.vuex_config.navList) {
					return this.vuex_config.navList;
				}
				return [];
			},
			is_order() {
				return this.filterList.length > 0 || this.orderList.length > 0;
			}
		},
		data() {
			return {
				tabwidth: 40,
				current: 0,
				status: 'nomore',
				page: 1,
				channel_id: 0,
				filterList: [],
				orderList: [],
				archivesList: [],
				is_show: false,
				has_more: false,
				scrollTop: 0,
				is_update: false,
				params: {},
				query: {},
				isTab: false,
				tabList: [],
				is_empty: false,
				channel: {},
				noticelist: [],
				like: '#aaa',
				webView: false


			};
		},
		onLoad(e) {
			console.log(uni.$u.config.v);

			var _this = this


			let query = e;
			if (JSON.stringify(query) == '{}') {
				query = e;
			}
			if (query && JSON.stringify(query) != '{}') {
				_this.params = query;
			} else {
				_this.params = {
					channel: 26,
					model: -1
				}
			}
			// this.getCategory();		
			_this.getArchives();
			_this.getNoticeList()
			// const value = uni.getStorageSync('storage_key')
			// if (value == 'hello') {
			// 	setTimeout(function() {
			// 		uni.removeStorageSync('storage_key');
			// 	}, 86400000);
			// } else {
			// 	uni.navigateTo({
			// 		url: '/pages/index/openScreen'
			// 	})
			// }


		},
		onShow() {
			var _this = this
			// #ifdef MP-BAIDU
			if (_this.channel) {
				_this.setPagesInfo();
			}
			// #endif	

		},
		methods: {

			gowebview() {
			this.webView = true
			},
			indexBar(item) {
				let path = item.url;

				console.log('1232', item);

				if (path == '/' || !path) {
					return;
				}

				if (path == 'develop') {
					this.$u.toast('正在开发中，敬请期待！', 3000);

					return true;

				}

				if (path == 'rencai') {

					this.goRenCaiWxapp();
					return;

				}

				if (['p', 'i', 'o'].includes(path.substr(0, 1))) {
					path = '/' + path;
				}
				if (path.indexOf('http') != -1 || path.indexOf('https') != -1) {
					this.$u.vuex('vuex_webs', item);
					path = '/pages/webview/webview';
				}
				let data = {},
					arr = path.split('?');
				if (arr[1]) {
					let q = arr[1].split('&');
					for (let item of q) {
						let param = item.split('=');
						data[param[0]] = param[1];
					}
				}
				this.$u.route(arr[0], data);

			},
			goRenCaiWxapp() {
				uni.navigateToMiniProgram({
					appId: 'wxff67b22df66a54ad', // 跳转目标小程序的id
					path: '/pages/star/index', // 目标小程序的页面路径
					extraData: { // 需要携带的参数
					},
					success(res) {
						// 打开成功
					}
				})
			},
			change(index) {
				//重设Bar宽度
				this.tabwidth = this.$util.strlen(this.tabList[index].title) * 30;
				this.current = index;
				this.channel_id = this.tabList[index].id;
				this.is_update = true;
				this.page = 1;
				this.getArchives();
			},
			goOrderBy(e) {
				this.page = 1;
				this.is_update = true;
				this.query = e;
				this.getArchives();
			},
			getArchives: async function() {
				let that = this
				let data = {
					page: 1,
					per_page: 3,
					...this.params,
					...this.query
				};
				if (this.channel_id) {
					data.channel = this.channel_id;
				}
				let res = await this.$api.getArchives(data);
				uni.stopPullDownRefresh();
				if (!res.code) {
					return;
				}
				let {
					filterList,
					orderList,
					pageList,
					channel
				} = res.data;
				this.archivesList = pageList.data;
				// if(this.archivesInfo.createtime){
				// 	this.archivesInfo.createtime = this.timestampToTime(this.archivesInfo.createtime)
				// }
				that.archivesList.forEach((item, index) => {
					if (item.createtime) {
						item.createtime = that.timestampToTime(item.createtime)
					}
				})
				this.is_empty = !this.archivesList.length;
			},
			// #ifdef MP-BAIDU
			setPagesInfo() {
				swan.setPageInfo({
					title: this.channel.seotitle,
					keywords: this.channel.keywords,
					description: this.channel.description,
					releaseDate: this.$u.timeFormat(this.channel.createtime, 'yyyy-mm-dd hh:MM:ss'),
					image: this.channel.image,
					success: res => {
						console.log('setPageInfo success', res);
					},
					fail: err => {
						console.log('setPageInfo fail', err);
					}
				});
			},
			// #endif
			getCategory() {
				this.$api.getCategory({
					...this.params
				}).then(res => {
					if (res.code == 1) {
						this.tabList = res.data;
						this.isTab = true; //百度小程序要先有值
					} else {
						this.$u.toast(res.msg);
					}
				});
			},
			openPage(index) {
				let path = this.bannerList[index].url;
				if (path == '/' || !path) {
					return;
				}
				if (['p', 'i', 'o'].includes(path.substr(0, 1))) {
					path = '/' + path;
				}
				if (path.indexOf('http') != -1) {
					this.$u.vuex('vuex_webs', this.bannerList[index]);
					path = '/pages/webview/webview';
				}
				let data = {},
					arr = path.split('?');
				if (arr[1]) {
					let q = arr[1].split('&');
					for (let item of q) {
						let param = item.split('=');
						data[param[0]] = param[1];
					}
				}
				this.$u.route(arr[0], data);
			},
			timestampToTime(createtime) {
				var date = new Date(createtime * 1000);
				var time = ''
				var Y = date.getFullYear() + '年';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + '日';
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				time = Y + M + D
				return time;
			},
			getNoticeList() {
				this.$api.getNoticeList().then(res => {
					if (res.code == 1) {
						this.noticelist = res.data.data;
						// this.isTab = true; //百度小程序要先有值
					} else {
						this.$u.toast(res.msg);
					}
				});
			},
			goMore() {
				this.$u.route('pages/index/more_news');
			},
			toNoticeDetail(item) {
				console.log(item, 'item')
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		//下拉刷新
		onPullDownRefresh() {
			this.is_update = true;
			this.page = 1;
			this.getArchives();
		},
		onReachBottom() {
			if (this.has_more) {
				this.status = 'loading';
				this.page = ++this.page;
				this.getArchives();
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;

		.searchBar {
			// display: flex;
			// flex-direction: row;
			background-color: #D9001B;
		}

		.swiper_box {
			width: 100%;
			height: 350rpx;
			position: relative;

			.swiper_center {
				width: 700rpx;
				position: absolute;
				left: 50%;
				margin-left: -350rpx;
			}

			.swiper_bgbox {
				width: 100%;
				height: 280rpx;
				position: absolute;
				background-color: #D9001B;
				border-radius: 0 0 30rpx 30rpx;
			}
		}

		.news {
			width: 100%;
			height: 80rpx;
			padding: 0 50rpx;
			margin-bottom: 20rpx;
			background-color: #fff;
			// background-color: red;
			display: flex;
			justify-content: space-around;
			font-size: 14px;

			.news_news {
				height: 80rpx;
				font-weight: bold;
				line-height: 80rpx;
				text-align: center;
				color: #D9001B;
				// width: ;
				font-size: 14px;
				text-align: center;

				.news_bon {
					color: red;
				}
			}

			.news_newsTitle {
				display: flex;
				height: 80rpx;
				line-height: 80rpx;
				padding-left: 20rpx;

				.news_title {
					// flex: 1;
					width: 500rpx;
				}

				.news_tim {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}

		.indexBar {
			display: flex;
			flex-wrap: wrap;
			// padding: 20rpx 0;
			margin-bottom: 20rpx;
			background-color: #fff;

			.indexBar_index {
				width: 25%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				padding: 20rpx 0;

				// margin-top: 20rpx;
				.BarTitle {
					margin-top: 7rpx;
				}
			}
		}
	}
</style>